<template>
	<div id="insured">

		<el-dialog :title="title" :visible.sync="dialogFormVisible">
			<el-form ref="form01" :model="form" label-width="90px">
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="投保人姓名:">
							<el-input v-model="form.policyholdersName" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6" :offset="6">
						<el-form-item label="性别:">
							<el-radio v-model="form.sex" label="男">男</el-radio>
							<el-radio v-model="form.sex" label="女">女</el-radio>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="证件类型:">
							<el-radio v-model="form.credentialsType" :label="1">身份证</el-radio>
							<el-radio v-model="form.credentialsType" :label="2">军官证</el-radio>
						</el-form-item>
					</el-col>
					<el-col :span="8" :offset="4">
						<el-form-item label="证件号码:">
							<el-input v-model="form.credenId" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="18">
						<el-form-item label="联系电话:">
							<el-input v-model="form.telephone" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="18">
						<el-form-item label="联系地址:">
							<el-input v-model="form.address" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="subins">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog :title="title2" :visible.sync="dialogFormVisible2">
			<el-form :model="form2" label-width="90px">
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="被保人姓名:">
							<el-input v-model="form2.recognizeeName" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6" :offset="6">
						<el-form-item label="性别:">
							<el-radio v-model="form2.sex" label="男">男</el-radio>
							<el-radio v-model="form2.sex" label="女">女</el-radio>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="证件类型:">
							<el-radio v-model="form2.credentialsType" :label="1">身份证</el-radio>
							<el-radio v-model="form2.credentialsType" :label="2">军官证</el-radio>
						</el-form-item>
					</el-col>
					<el-col :span="8" :offset="4">
						<el-form-item label="证件号码:">
							<el-input v-model="form2.credentialsId" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="18">
						<el-form-item label="联系电话:">
							<el-input v-model="form2.telephone" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="18">
						<el-form-item label="联系地址:">
							<el-input v-model="form2.address" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="银行名称:">
							<el-input v-model="form2.bank" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="银行账户:">
							<el-input v-model="form2.banjAccount" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="驾驶证号码:">
							<el-input v-model="form2.driverId" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="投保人姓名:">
							<el-input v-model="xspolicyholdersName" autocomplete="off" disabled></el-input>
							<el-button type="primary" @click="xuanze">选择投保人</el-button>
							<el-dialog title="选择投保人" append-to-body :visible.sync="dialogFormVisible3">
								<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm fo">
									<el-form-item label="姓名" prop="name">
										<el-input v-model="ruleForm.name"></el-input>
									</el-form-item>
									<el-form-item label="身份证号" prop="sfz">
										<el-input v-model="ruleForm.sfz"></el-input>
									</el-form-item>
									<el-form-item>
										<el-button type="primary" @click="submitForm2()">查询</el-button>
									</el-form-item>
								</el-form>
								<el-table :data="tableData" highlight-current-row @current-change="handleCurrentChange2" style="width: 100%;height:325px">
									<el-table-column property="policyholdersName" label="投保人姓名" width="180">
									</el-table-column>
									<el-table-column property="sex" label="性别" width="140">
									</el-table-column>
									<el-table-column property="credenId" label="证件号码" width="240">
									</el-table-column>
									<el-table-column property="address" label="联系地址">
									</el-table-column>
								</el-table>
								<el-pagination @current-change="getpdKehu" :current-page.sync="pagesyn" hide-on-single-page layout="prev, pager, next, jumper"
								 :total="total">
								</el-pagination>
								<div slot="footer" class="dialog-footer">
									<el-button type="primary" @click="quedinXuanze">确 定</el-button>
								</div>
							</el-dialog>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible2 = false">取 消</el-button>
				<el-button type="primary" @click="subins2">确 定</el-button>
			</div>
		</el-dialog>

		<el-container>
			<el-header>
				<el-row :gutter="20">
					<el-col :span="3">
						<div class="grid-content bg-purple">车险理赔系统</div>
					</el-col>
					<el-col :span="2" :offset="14">
						<div class=" bg-purple font1">欢迎您</div>
					</el-col>
					<el-col :span="2">
						<div class=" bg-purple font1">{{uname}}</div>
					</el-col>
					<el-col :span="2">
						<div class=" bg-purple font1"><a class="hover1" @click="exit">安全退出</a></div>
					</el-col>
				</el-row>
			</el-header>
			<el-main>
				<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm fo">
					<el-form-item label="姓名" prop="name">
						<el-input v-model="ruleForm.name"></el-input>
					</el-form-item>
					<el-form-item label="身份证号" prop="sfz">
						<el-input v-model="ruleForm.sfz"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm()">查询</el-button>
						<el-button @click="resetForm()">重置</el-button>
					</el-form-item>
				</el-form>
				<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
					<el-tab-pane label="投保人列表" name="first">
						<el-tooltip v-if="Jurisdictions.indexOf('insert') != -1" content="新增" placement="top">
							<el-button type="primary" icon="el-icon-plus" @click="addPolicyholders"></el-button>
						</el-tooltip>
						<el-tooltip v-if="Jurisdictions.indexOf('update') != -1" content="修改" placement="top">
							<el-button class="button" type="primary" icon="el-icon-edit" @click="updPolicyholders"></el-button>
						</el-tooltip>
						<el-tooltip v-if="Jurisdictions.indexOf('delete') != -1" content="删除" placement="top">
							<el-button class="button" type="primary" icon="el-icon-delete" @click="delPolicyholders"></el-button>
						</el-tooltip>
						<el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%;height:325px">
							<el-table-column property="policyholdersName" label="投保人姓名" width="180">
							</el-table-column>
							<el-table-column property="sex" label="性别" width="140">
							</el-table-column>
							<el-table-column property="credentialsType" label="证件类型" width="140">
							</el-table-column>
							<el-table-column property="credenId" label="证件号码" width="240">
							</el-table-column>
							<el-table-column property="telephone" label="联系电话" width="200">
							</el-table-column>
							<el-table-column property="address" label="联系地址">
							</el-table-column>
						</el-table>
					</el-tab-pane>
					<el-tab-pane label="被保人列表" name="second">
						<el-tooltip v-if="Jurisdictions.indexOf('insert') != -1" content="新增" placement="top">
							<el-button type="primary" icon="el-icon-plus" @click="addRecognizee"></el-button>
						</el-tooltip>
						<el-tooltip v-if="Jurisdictions.indexOf('update') != -1" content="修改" placement="top">
							<el-button class="button" type="primary" icon="el-icon-edit" @click="updRecognizee"></el-button>
						</el-tooltip>
						<el-tooltip v-if="Jurisdictions.indexOf('delete') != -1" content="删除" placement="top">
							<el-button class="button" type="primary" icon="el-icon-delete" @click="delRecognizee"></el-button>
						</el-tooltip>
						<el-table ref="singleTable" :data="tableData1" highlight-current-row @current-change="handleCurrentChange1" style="width: 100%;height:325px">
							<el-table-column property="recognizeeName" label="被保人姓名" width="180">
							</el-table-column>
							<el-table-column property="sex" label="性别" width="140">
							</el-table-column>
							<el-table-column property="credentialsType" label="证件类型" width="140">
							</el-table-column>
							<el-table-column property="credentialsId" label="证件号码" width="240">
							</el-table-column>
							<el-table-column property="telephone" label="联系人电话" width="200">
							</el-table-column>
							<el-table-column property="address" label="联系地址" width="240">
							</el-table-column>
							<el-table-column property="bank" label="银行名称" width="180">
							</el-table-column>
							<el-table-column property="banjAccount" label="银行账户" width="180">
							</el-table-column>
							<el-table-column property="driverId" label="驾驶证号码" width="240">
							</el-table-column>
							
						</el-table>
					</el-tab-pane>
				</el-tabs>
				<p>一共<span style="color: red;">{{count}}</span>条数据</p>
				<el-pagination @current-change="getpdKehu" :current-page.sync="pagesyn" hide-on-single-page layout="prev, pager, next, jumper"
				 :total="total">
				</el-pagination>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		name: 'insured',
		data() {
			return {
				uname: sessionStorage.getItem("userName"),
				ruleForm: {
					name: '',
					sfz: ''
				},
				activeName: 'first',
				tableData: [],
				tableData1: [],
				policyholdersIdDemo: 0,
				total: 0,
				count: 0,
				pdKehu: 0,
				pdTiaojian: -1,
				Jurisdictions: [],
				dialogFormVisible: false,
				dialogFormVisible2: false,
				dialogFormVisible3: false,
				title: '',
				title2: '',
				form: {
					policyholdersId: 0,
					policyholdersName: '',
					sex: '男',
					credentialsType: 1,
					credenId: '',
					telephone: '',
					address: ''
				},
				form2: {
					recognizeeId: 0,
					recognizeeName: '',
					sex: '男',
					credentialsType: 1,
					credentialsId: '',
					telephone: '',
					address: '',
					bank: '',
					banjAccount: '',
					driverId: '',
					policyholdersId : 0
				},
				xspolicyholdersName : '',
				policyholdersNameOrIds: [],
				pagesyn : 0
			};
		},
		methods: {
			//查询全部投保人信息
			getPolicyholdersAll(page) {
				this.$axios.get("/policyholders/getPolicyholdersAll?page=" + page)
					.then(msg => {
						this.tableData = msg.data.list;
						for (var i = 0; i < this.tableData.length; i++) {
							if (this.tableData[i].credentialsType == 1) {
								this.tableData[i].credentialsType = "身份证";
							} else {
								this.tableData[i].credentialsType = "军官证";
							}
						}
						this.total = msg.data.pages * 10;
						this.count = msg.data.total;
						this.pagesyn = page;
					});
			},
			getRecognizeeAll(page) {
				this.$axios.get("/recognizee/getRecognizeeAll?page=" + page)
					.then(msg => {
						this.tableData1 = msg.data.list;
						for (var i = 0; i < this.tableData1.length; i++) {
							if (this.tableData1[i].credentialsType == 1) {
								this.tableData1[i].credentialsType = "身份证";
							} else {
								this.tableData1[i].credentialsType = "军官证";
							}
						}
						this.total = msg.data.pages * 10;
						this.count = msg.data.total;
						this.pagesyn = page;
					});
			},
			getPolicyholdersByNameOrCredenId(page) {
				this.$axios.get("/policyholders/selectPolicyholdersByNameOrCredenId", {
						params: {
							name: this.ruleForm.name,
							credenId: this.ruleForm.sfz,
							page: page
						}
					})
					.then(msg => {
						this.tableData = msg.data.list;
						for (var i = 0; i < this.tableData.length; i++) {
							if (this.tableData[i].credentialsType == 1) {
								this.tableData[i].credentialsType = "身份证";
							} else {
								this.tableData[i].credentialsType = "军官证";
							}
						}
						this.total = msg.data.pages * 10;
						this.count = msg.data.total;
						this.pagesyn = page;
					});
			},
			getRecognizeeByNameOrCredentialsId(page) {
				this.$axios.get("/recognizee/getRecognizeeAll", {
						params: {
							name: this.ruleForm.name,
							credentialsId: this.ruleForm.sfz,
							page: page
						}
					})
					.then(msg => {
						this.tableData1 = msg.data.list;
						for (var i = 0; i < this.tableData1.length; i++) {
							if (this.tableData1[i].credentialsType == 1) {
								this.tableData1[i].credentialsType = "身份证";
							} else {
								this.tableData1[i].credentialsType = "军官证";
							}
						}
						this.total = msg.data.pages * 10;
						this.count = msg.data.total;
						this.pagesyn = page;
					});
			},
			submitForm() {
				if (this.ruleForm.name.length != 0 || this.ruleForm.sfz.length != 0) {
					this.pdTiaojian = 0;
				} else {
					this.pdTiaojian = -1;
				}
				if (this.pdKehu == 0) {
					this.getPolicyholdersByNameOrCredenId(1);
				} else {
					this.getRecognizeeByNameOrCredentialsId(1);
				}
			},
			submitForm2(){
				this.getPolicyholdersByNameOrCredenId(1);
			},
			resetForm() {
				this.ruleForm.name = "";
				this.ruleForm.sfz = "";
			},
			quedinXuanze(){
				
				if(this.xspolicyholdersName.length == 0 ){
					this.$notify({
						title: '提示',
						message: '请选择投保人信息',
						type: 'warning'
					});
				}else{
					this.dialogFormVisible3 = false;
					this.ruleForm.name = '';
					this.ruleForm.sfz = '';
					this.getRecognizeeByNameOrCredentialsId(1);
				}
			},
			xuanze(){
				this.dialogFormVisible3 = true;
				this.ruleForm.name = '';
				this.ruleForm.sfz = '';
			},
			getpdKehu(page) {
				if (this.pdKehu == 0) {
					if ((this.ruleForm.name.length != 0 || this.ruleForm.sfz.length != 0) && this.pdTiaojian == 0) {
						this.getPolicyholdersByNameOrCredenId(page);
					} else {
						this.pdTiaojian = -1;
						this.getPolicyholdersAll(page);
					}
				} else {
					if ((this.ruleForm.name.length != 0 || this.ruleForm.sfz.length != 0) && this.pdTiaojian == 0) {
						this.getRecognizeeByNameOrCredentialsId(page);
					} else {
						this.pdTiaojian = -1;
						this.getRecognizeeAll(page);
					}
				}
			},
			handleClick(tab) {
				this.pdTiaojian = -1;
				this.ruleForm.name = "";
				this.ruleForm.sfz = "";
				this.policyholdersIdDemo = 0;
				if (tab.label == "投保人列表") {
					this.pdKehu = 0;
					this.getPolicyholdersAll(1);
				} else {
					this.pdKehu = 1;
					this.getRecognizeeAll(1);
				}
			},
			handleCurrentChange(val) {
				this.policyholdersIdDemo = val.policyholdersId;
			},
			handleCurrentChange1(val) {
				this.policyholdersIdDemo = val.recognizeeId;
			},
			handleCurrentChange2(val){
				this.form2.policyholdersId = val.policyholdersId;
				this.xspolicyholdersName = val.policyholdersName;
			},
			addPolicyholders() {
				this.title = "新增投保人信息";
				this.dialogFormVisible = true;
				this.form.policyholdersId = 0;
				this.form.policyholdersName = '';
				this.form.sex = '男';
				this.form.credentialsType = 1;
				this.form.credenId = '';
				this.form.telephone = '';
				this.form.address = '';
			},
			updPolicyholders() {
				if (this.policyholdersIdDemo == 0) {
					this.$notify({
						title: '提示',
						message: '请选择投保人信息',
						type: 'warning'
					});
				} else {
					this.title = "修改投保人信息";
					this.$axios.get("/policyholders/getPolicyholdersById?policyholdersId=" + this.policyholdersIdDemo)
						.then(msg => {
							this.form = msg.data;
							this.dialogFormVisible = true;
						});
				}
			},
			delPolicyholders() {
				if (this.policyholdersIdDemo == 0) {
					this.$notify({
						title: '提示',
						message: '请选择投保人信息',
						type: 'warning'
					});
				} else {
					this.$confirm('此操作将删除该投保人, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$axios.get("/policyholders/delPolicyholders?policyholdersId=" + this.policyholdersIdDemo)
							.then(msg => {
								if (msg.data == "成功") {
									this.$notify({
										title: '成功',
										message: '删除投保人信息成功',
										type: 'success'
									});
									this.getPolicyholdersAll(1);
								}
							});
					}).catch(() => {
						this.$notify.info({
							title: '取消',
							message: '已取消删除'
						});
					});

				}
			},
			subins() {
				if (this.title == "新增投保人信息") {
					if (this.form.policyholdersName.length == 0 || this.form.credenId.length ==
						0 || this.form.telephone.length == 0 || this.form.address.length == 0) {
						this.$notify({
							title: '警告',
							message: '请填写完整的投保人信息',
							type: 'warning'
						});
					} else {
						this.$axios.post("/policyholders/insPolicyholders", this.form)
							.then(msg => {
								if (msg.data == "成功") {
									this.$notify({
										title: '成功',
										message: '新增投保人信息成功',
										type: 'success'
									});
									this.dialogFormVisible = false;
									this.getPolicyholdersAll(1);
								}
							});
					}
				} else {
					if (this.form.policyholdersName.length == 0 || this.form.credenId.length ==
						0 || this.form.telephone.length == 0 || this.form.address.length == 0) {
						this.$notify({
							title: '警告',
							message: '请填写完整的投保人信息',
							type: 'warning'
						});
					} else {
						this.$axios.post("/policyholders/updPolicyholders", this.form)
							.then(msg => {
								if (msg.data == "成功") {
									this.$notify({
										title: '成功',
										message: '修改投保人信息成功',
										type: 'success'
									});
									this.dialogFormVisible = false;
									this.getPolicyholdersAll(1);
								}
							});
					}
				}
			},
			addRecognizee() {
				this.title2 = "新增被保人信息";
				this.form2.recognizeeId = 0;
				this.form2.recognizeeName = '';
				this.form2.sex = '男';
				this.form2.credentialsType = 1;
				this.form2.credentialsId = '';
				this.form2.telephone = '';
				this.form2.address = '';
				this.form2.bank = '';
				this.form2.banjAccount = '';
				this.form2.driverId = '';
				this.form2.policyholdersId = 0;
				this.xspolicyholdersName = '';
				this.dialogFormVisible2 = true;
			},
			updRecognizee() {
				if (this.policyholdersIdDemo == 0) {
					this.$notify({
						title: '提示',
						message: '请选择被保人信息',
						type: 'warning'
					});
				} else {
					this.title2 = "修改被保人信息";
					this.$axios.get("/recognizee/getRecognizeeById?recognizeeId=" + this.policyholdersIdDemo)
						.then(msg => {
							this.form2 = msg.data;
							this.dialogFormVisible2 = true;
						});
				}

			},
			delRecognizee() {
				if (this.policyholdersIdDemo == 0) {
					this.$notify({
						title: '提示',
						message: '请选择被保人信息',
						type: 'warning'
					});
				} else {
					this.$confirm('此操作将删除该被保人, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$axios.get("/recognizee/delRecognizee?recognizeeId=" + this.policyholdersIdDemo)
							.then(msg => {
								if (msg.data == "成功") {
									this.$notify({
										title: '删除',
										message: '成功删除被保人信息',
										type: 'success'
									});
									this.getRecognizeeAll(1);
								}
							});
					}).catch(() => {
						this.$notify.info({
							title: '取消',
							message: '已取消删除'
						});
					});
				}
			},
			subins2() {
				if (this.title2 == "新增被保人信息") {
					if (this.form2.recognizeeName.length == 0 || this.form2.credentialsId.length ==
						0 || this.form2.telephone.length == 0 || this.form2.address.length == 0 || this.form2.bank.length == 0 ||
						this.form2.banjAccount.length == 0 || this.form2.driverId.length == 0 || this.form2.policyholdersId == 0
					) {
						this.$notify({
							title: '警告',
							message: '请填写完整的被保人信息',
							type: 'warning'
						});
					} else {
						this.$axios.post("/recognizee/insRecognizee", this.form2)
							.then(msg => {
								if (msg.data == "成功") {
									this.$notify({
										title: '成功',
										message: '新增被保人信息成功',
										type: 'success'
									});
									this.dialogFormVisible2 = false;
									this.getRecognizeeAll(1);
								}
							});
					}
				} else {
					if (this.form2.recognizeeName.length == 0 || this.form2.credentialsId.length ==
						0 || this.form2.telephone.length == 0 || this.form2.address.length == 0 || this.form2.bank.length == 0 ||
						this.form2.banjAccount.length == 0 || this.form2.driverId.length == 0 || this.form2.policyholdersId == 0
					) {
						this.$notify({
							title: '警告',
							message: '请填写完整的被保人信息',
							type: 'warning'
						});
					} else {
						this.$axios.post("/recognizee/updRecognizee", this.form2)
							.then(msg => {
								if (msg.data == "成功") {
									this.$notify({
										title: '成功',
										message: '修改被保人信息成功',
										type: 'success'
									});
									this.dialogFormVisible2 = false;
									this.getRecognizeeAll(1);
								}
							});
					}
				}
			},
			exit() {
				sessionStorage.clear();
				this.$router.push("/login");
			}
		},
		mounted() {
			this.Jurisdictions = JSON.parse(sessionStorage.getItem("Jurisdictions"));
			this.getPolicyholdersAll(1);
		}
	};
</script>

<style scoped>
	.el-header {
		text-align: center;
		line-height: 60px;
	}

	.el-container {
		margin-left: 8px;
	}

	.el-header {
		padding: 0 0;
		border: #A8A8A8 1px solid;
		border-bottom: 0px;
		background-color: white;
	}

	.el-main {
		background-color: white;
		border: #A8A8A8 1px solid;
	}

	.font1 {
		color: #545C64;
		font-size: 14.2px;
	}

	.fo {
		display: flex;
		border: #A8A8A8 1px solid;
		padding-top: 20px;
	}

	.el-form-item {
		width: 400px;
	}

	.el-tabs {
		margin-top: 9px;
	}

	.button {
		margin-left: 41px;
	}

	.hover1:hover {
		color: blue;
	}
</style>
